<template>
	<view>
		<view class="topic-wrap">
			<view class="block-title">我加入的圈子</view>
			<scroll-view scroll-x>
				<view style="display: flex;">
					<navigator url="/pages/topic/class-list" class="topic-item">
						<image class="cover-img" src="/static/index-topic.png" mode="aspectFill"></image>
						<view class="name-txt">发现圈子</view>
					</navigator>
					<navigator :url="'/pages/topic/index?topic_id='+item.id" class="topic-item"
						v-for="(item,index) in joinTopicList" :key="index">
						<image class="cover-img" :src="item.cover_image" mode="aspectFill"></image>
						<view class="name-txt u-line-1">{{item.name}}</view>
					</navigator>
				</view>
			</scroll-view>
		</view>
		<q-index-post-list :list="postList" :loadStatus="loadStatus" />
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				postList: [],
				loadStatus: 'loading',
				page: 1,
				scrollTop: 0,
				joinTopicList: []
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(options) {
			this.getPostList();
		},
		onShow() {
			if (this.userInfo && this.userInfo.id) {
				this.getMsgNum();
				this.getJoinTopic();
			}
		},
		onReachBottom() {
			this.page++;
			this.getPostList();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.postList = [];
			this.getPostList();

			uni.stopPullDownRefresh();
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: '云喵校园集市-年轻人兴趣社区圈子',
				path: '/pages/index/index',
				imageUrl: ''
			};
		},
		onShareTimeline() {
			return {
				title: '云喵校园集市-年轻人兴趣社区圈子',
				imageUrl: ''
			};
		},
		methods: {
			getJoinTopic() {
				this.$H.get("topic/currentUserJoinTopic").then(res => {
					this.joinTopicList = res.result;
				})
			},
			handelAdd(url) {
				if (this.$store.state.hasLogin) {
					uni.navigateTo({
						url
					})
				} else {
					uni.navigateTo({
						url: '/pages/user/login'
					});
				}
			},
			getMsgNum() {
				this.$H.post('message/num').then((res) => {
					this.msgNum = res.result;
					let messageNum = res.result.all_count;
					if (messageNum > 0) {
						uni.setTabBarBadge({
							index: 1,
							text: messageNum + ''
						});
					} else {
						uni.removeTabBarBadge({
							index: 1
						});
					}
				});
			},
			getPostList() {
				this.loadStatus = 'loading';
				this.$H.get('post/list', {
					page: this.page
				}).then((res) => {
					if (res.code == 1) {
						this.postList = this.postList.concat(res.result.data);

						if (res.result.current_page === res.result.last_page || res.result.last_page === 0) {
							this.loadStatus = 'nomore';
						} else {
							this.loadStatus = 'loadmore';
						}
					} else {
						this.loadStatus = 'nomore';
						this.listTips = '圈子不存在或已关闭';
					}
				});
			}
		}
	};
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.topic-wrap {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.block-title {
			font-size: 28rpx;
			font-weight: bold;
			color: #616161;
			margin-bottom: 30rpx;
		}

		.topic-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-right: 30rpx;
			padding: 20rpx;

			.cover-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 20rpx;
				margin-bottom: 10rpx;
			}

			.name-txt {
				font-weight: bold;
				color: #616161;
				font-size: 24rpx;
			}
		}
	}
</style>